<script setup lang="ts">
const emit = defineEmits(['change-mask', 'update-sell', 'delete-shop'])
const props = defineProps({
    maskshow: {
        type: Boolean,
        default: false,
    },
    status: {
        type: String,
        default: '',
    },
})

/**
 * 操作上架下架删除的遮罩层
 */
const handleChangeMask = () => {
    emit('change-mask')
}
/**
 * 触发上下架的回调
 */
const handleUpdateSell = () => {
    emit('update-sell')
    emit('change-mask')
}
/**
 * 触发删除回调
 */
const handleDelete = () => {
    emit('delete-shop')
    emit('change-mask')
}
</script>

<template>
    <!-- 批量操作遮罩层 -->
    <u-mask :show="props.maskshow">
        <view class="mask">
            <template v-if="props.status === 'SELL_OFF'">
                <view class="mask__btn" @click="handleUpdateSell">
                    <view class="mask__btn--left">上架</view>
                    <view class="mask__btn--right">
                        <u-icon name="shangjia" custom-prefix="icon" class="iconfont" size="38" color="#4755E9"></u-icon
                    ></view>
                </view>
            </template>
            <template v-if="props.status === 'SELL_ON'">
                <view class="mask__btn" @click="handleUpdateSell">
                    <view class="mask__btn--left">下架</view>
                    <view class="mask__btn--right">
                        <u-icon name="xiajia" custom-prefix="icon" class="iconfont" size="38" color="#4755E9"></u-icon
                    ></view>
                </view>
            </template>
            <view v-if="props.status !== 'SELL_ON'" class="mask__btn" @click="handleDelete">
                <view class="mask__btn--left">删除</view>
                <view class="mask__btn--right"
                    ><u-icon name="shanchu1" custom-prefix="icon" class="iconfont" size="38" color="#4755E9"></u-icon
                ></view>
            </view>
            <view class="mask__btn" style="margin-bottom: 130rpx" @click="handleChangeMask">
                <u-icon name="icon-close" custom-prefix="icon" class="iconfont" size="65" color="#4755E9"></u-icon>
            </view>
        </view>
    </u-mask>
</template>

<style lang="scss" scoped>
@include b(mask) {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    padding: 44rpx;

    @include e(btn) {
        display: flex;
        align-items: center;
        margin-bottom: 20rpx;
        @include m(left) {
            color: rgba(255, 255, 255, 1);
            font-size: 24rpx;
        }
        @include m(right) {
            width: 60rpx;
            height: 60rpx;
            line-height: 60rpx;
            background-color: rgba(255, 255, 255, 1);
            text-align: center;
            border-radius: 30rpx;
            margin-left: 20rpx;
        }
    }
}
</style>
